<template>
  <div class="table">
    <div class="container">
      <div class="handler-box">
        <el-input v-model="selectKey" size="mini"placeholder="请输入评论" class="handle-input"></el-input>
        <el-button type="primary" size="mini" @click="centerDiaLogVisible=true">添加歌单</el-button>
        <el-button type="danger" size="mini" @click="handlerDeleteAll">全部删除</el-button>
      </div>
    </div>
    <!--    评论列表-->
    <el-table size="mini" border style="width: 100%;height:600px" max-height="500" @selection-change="handlerSelectionChange" :data="data">
      <el-table-column type="selection" width="40"></el-table-column>
      <el-table-column label="用户id" width="200" align="center" prop="userId"></el-table-column>
      <el-table-column label="评论" width="795" align="center" prop="content"></el-table-column>
      <el-table-column label="操作" width="331" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handlerEdit(scope.row)" type="primary">编辑</el-button>
          <el-button size="mini" @click="handlerDelete(scope.row.id)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination background layout="total,prev,pager,next"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     :total="tableData.length"
                     @current-change="handlerChange"
      >
      </el-pagination>
    </div>
    <el-dialog
        title="添加评论"
        :visible="centerDiaLogVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="registerForm" ref="registerForm" label-width="80px">
        <el-form-item prop="userId" label="用户Id" size="mini" >
          <el-input v-model="registerForm.userId" placeholder="用户Id"></el-input>
        </el-form-item>
        <el-form-item prop="content" label="评论" size="mini">
          <el-input v-model="registerForm.content" placeholder="评论"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="centerDiaLogVisible=false">取消</el-button>
        <el-button size="mini" @click="addContent">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="编辑评论"
        :visible="editVisible"
        width="400px"
        center
        :show-close="false"
    >
      <el-form :model="editForm" ref="editForm" label-width="80px">
        <el-form-item prop="userId" label="用户Id" size="mini" >
          <el-input v-model="editForm.userId" placeholder="用户Id"  :disabled="true"></el-input>
        </el-form-item>
        <el-form-item prop="content" label="评论" size="mini">
          <el-input v-model="editForm.content" placeholder="评论"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button size="mini" @click="editVisible=false">取消</el-button>
        <el-button size="mini" @click="editContent">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除评论"
        :visible="deleteVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除该评论!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteComment">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog
        title="删除全部评论"
        :visible="deleteAllVisible"
        width="300px"
        center
        :show-close="false"
    >
      <div align="center">是否删除全部评论!!</div>
      <span slot="footer">
        <el-button size="mini" @click="deleteAllVisible=false">取消</el-button>
        <el-button size="mini" @click="deleteAll">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
name: "Remake",
  data(){
    return{
      id:'',
      centerDiaLogVisible:false,
      editVisible:false,
      deleteVisible:false,
      deleteAllVisible:false,
      registerForm:{
        userId:'',
        content:''
      },
      //编辑框
      editForm:{
        id:'',
        userId:'',
        content:''
      },
      //歌曲列表
      tableData:[],
      tempData:[],
      selectKey:'',
      pageSize:10,
      currentPage:1,
      idx:'',
      multipleSelection:[] //哪些已经打勾了
    }
  },
  mounted() {
  this.id=this.$route.query.songListId
  this.getData()
  },
  methods:{
 async getData(){
    let result=await this.$API.reqShowCommentInfo(this.$route.query.songListId)
    if (result.code==10000){
      this.tableData=result.data
      this.tempData=result.data
    }else {
      this.$notify.error('系统异常')
    }
  },
    async addContent(){
      let params=new URLSearchParams()
      params.append('userId',this.registerForm.userId)
      params.append('type',1)
      params.append('content',this.registerForm.content)
      params.append('songId',null)
      params.append('songListId',this.id)
      let result=await this.$API.reqAddCommentInfo(params)
      if (result.code==10000){
        this.centerDiaLogVisible=false
        this.$notify.success('添加评论成功')
        await this.getData()
      }else {
        this.$notify.error('系统异常')
      }
    },
    handlerEdit(row){
      this.editVisible=true
      this.editForm.content=row.content
      this.editForm.userId=row.userId
      this.editForm.id=row.id
    },
    async editContent(){
      let params=new URLSearchParams()
      params.append('userId',this.editForm.userId)
      params.append('id',this.editForm.id)
      params.append('type',1)
      params.append('content',this.editForm.content)
      params.append('songId',null)
      params.append('songListId',this.id)
      let result=await this.$API.reqUpdateCommentInfo(params)
      if (result.code==10000){
        this.$notify.success('更新评论成功')
        this.editVisible=false
        await this.getData()
      }else {
        this.$notify.error('系统异常')
      }
    },
    handlerDelete(id){
      this.deleteVisible=true
      this.idx=id
    },
    async deleteComment(){
      let result= await this.$API.reqDeleteCommentInfo(this.idx)
      if (result.code==10000){
        this.deleteVisible=false
        this.$notify.success('删除成功')
        await this.getData()
      }else {
        this.$notify.error('系统异常')
      }
    },
    handlerDeleteAll(id){
     this.deleteAllVisible=true
      this.idx=id
    },
    deleteAll(){
      for (let item of this.multipleSelection){
        this.handlerDeleteAll(item.id)
        this.deleteComment()
      }
      this.deleteAllVisible=false
      this.multipleSelection=[]
   },
    handlerSelectionChange(val){
      this.multipleSelection=val
    },
    //分页跳转
    handlerChange(val){
      this.currentPage=val
    }
  },
watch:{
  //监听输入框里面的内容，跟随变化
  selectKey(){
    if (this.selectKey==''){
      this.tableData=this.tempData
    }else {
      this.tableData=[]
      for (let item of this.tempData){
        if (item.content.includes(this.selectKey)){
          this.tableData.push(item)
        }
      }
    }
  }
},
  computed:{
    data(){
      return this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
    },
  }
}
</script>

<style scoped>
.handler-box{
  margin-bottom: 20px;
}
.handle-input{
  width: 300px;
  display: inline-block;
}
.pagination{
  display: flex;
  justify-content: center;
}
</style>
